<template>
  <view>
    <!--      标签栏-->
    <view class="tabs">
      <view class="tabs-title" v-for="(item, index) in tabsList" :key="index" @click="changeIndex(index)">
        <text class="tabs-title-text">
          {{ item.title }}
        </text>
        <text class="tabs-title-text-desc">
          {{ item.desc }}
        </text>
      </view>
    </view>
    <!--      内容栏-->
    <view class="tabs-content">
      <uni-card margin="20rpx" :is-shadow="false" v-for="(item, index) in shopList" :key="index">
        <view class="tabs-content-card">
          <image :src="item.img" mode="scaleToFill"></image>
          <view class="tabs-content-card-info">
            <view class="tabs-content-card-info-text">
              <text class="tabs-content-card-info-text-title">{{ item.title }}</text>
              <text class="tabs-content-card-info-text-desc">{{ item.desc }}</text>
            </view>
            <view class="tabs-content-card-info-bottom">
              <view class="tabs-content-card-info-bottom-price">
                <text class="tabs-content-card-info-bottom-price-number">{{ item.number }}</text>
                元/{{ item.type }}起
              </view>
              <view class="tabs-content-card-info-bottom-button">
                <u-button type="primary" shape="circle" text="立即预约" @click="selectShop(index)"></u-button>
              </view>
            </view>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabsList: [
        {
          title: '精选',
          desc: ''
        },{
          title: '家电维修',
          desc: '修不好不收费'
        },{
          title: '家电清洗',
          desc: '修不好不收费'
        },{
          title: '水电维修',
          desc: '修不好不收费'
        },
      ],
      shopList: [
        {
          img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240103/1704276590862.jpg',
          title: '洗衣机维修',
          desc: '保修90天·快速响应·维修计价器报价',
          number: '98',
          type: '台'
        },{
          img: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240103/1704276590862.jpg',
          title: '洗衣机维修',
          desc: '保修90天·快速响应·维修计价器报价',
          number: '98',
          type: '台'
        },
      ],
      currentIndex: 0
    }
  },
  methods: {
    changeIndex(index) {
      console.log(index)
      if (this.currentIndex !== index) return this.currentIndex = index
    },
  //   选择商品
    selectShop(index){
      console.log(index)
    }
  },
}
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;

  &-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &-text {
      font-size: 18px;
      font-weight: 700;
    }

    &-text-desc {
      font-size: $uni-text-text-grey;
      margin-top: 10px;
      color: $uni-text-color-grey;
    }
  }
}

.tabs-content {
  margin-top: 15px;

  &-card image {
    width: 190rpx;
    height: 190rpx;
    border-radius: $uni-border-radius;
  }

  &-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 10px;
      width: 65%;

      &-text {
        display: flex;
        flex-direction: column;

        &-title {
          font-size: 18px;
          font-weight: 700;
          color: black;
        }

        &-desc {
          font-size: $uni-text-text-grey;
          color: $uni-text-color-grey;
        }
      }

      &-bottom {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        &-price {
          color: red;

          &-number {
            font-size: 20px;
            font-weight: 500;
          }
        }

        &-button {
          text-align: right;
        }
      }
    }
  }
}
</style>
